<script>
import { normal_option } from "../common";
import Base from "./Base";

export default {
  name: "ChartLine",
  mixins: [Base],
  data() {
    return {
      defaultOption: {
        ...normal_option,
        tooltip: {
          // trigger: "axis",
          show: true,
          confine: true,
          extraCssText:
            "max-width:300px; white-space:pre-wrap; word-break:break-all",
        },
        grid: {
          right: 23,
          bottom: 50,
          top: 45
        },
        legend: {
          show: false,
        },
        xAxis: {
          show: true,
          type: "category",
          axisLine: {
            show: true,
          }, // 坐标轴线
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
            rotate: -15,
            margin: 18,
            align: "center",
            verticalAlign: "middle",
          }, // 坐标轴标签
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
          }, // 坐标轴标签
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [],
      },
      defaultSeries: {
        type: "line",
        smooth: true,
      },
    };
  },
  computed: {
    option: function () {
      const { xData, yDatas } = this.handleData(this.dataset);
      let series = [];

      let option = this.dataset.option;

      if (yDatas && yDatas.length > 1) {
        yDatas.forEach((yData) => {
          series.push({
            ...this.defaultSeries,
            name: yData.name,
            data: yData.data,
          });
        });
      } else {
        yDatas.forEach((yData) => {
          series.push({
            ...this.defaultSeries,
            // name: yData.name,
            data: yData.data,
          });
        });
      }

      if (option && option.xAxis) {
        this.defaultOption.xAxis = Object.assign(
          {},
          this.defaultOption.xAxis,
          option.xAxis
        );
      }

      this.defaultOption.xAxis.data = xData;

      let yAxis = Object.assign(
        {},
        this.defaultOption.yAxis,
        this.dataset.option && this.dataset.option.yAxis
          ? this.dataset.option.yAxis
          : {}
      );

      this.defaultOption = {
        ...this.defaultOption,
        yAxis,
      };

      if (option && option.legend) {
        this.defaultOption.legend = Object.assign(
          {},
          this.defaultOption.legend,
          option.legend
        );
      }

      // yDatas.forEach((yData) => {
      //   series.push({
      //     ...this.defaultSeries,

      //     name: yData.name,
      //     data: yData.data,
      //   });
      // });
      console.log(this.handleData(this.dataset));
      return {
        ...this.defaultOption,
        series,
      };
    },
  },
};
</script>
